<template>
  <BasicModal v-bind="$attrs" @register="detailsModal" width="50%" height="80%" @cancel="handCancel">
    <a-tabs defaultActiveKey="base-info" v-model:activeKey="activeKey">
      <a-tab-pane tab="设备信息" key="device-info" forceRender style="position: relative">
        <div style="padding: 0 20px">
          <a-form
            :model="orderMainModel"
            :label-col="{
              style: {
                width: '100px',
              },
            }"
          >
            <a-row :gutter="20">
              <a-col :span="12">
                <a-form-item label="设备编号" name="deviceId" :rules="[{ required: true }]">
                  <a-input v-model:value="orderMainModel.deviceId" disabled />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="所属产品" name="productName" :rules="[{ required: true }]">
                  <a-input v-model:value="orderMainModel.productName" disabled />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="设备名称" name="deviceName" :rules="[{ required: true }]">
                  <a-input v-model:value="orderMainModel.deviceName" disabled />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="设备省市区" name="jal">
                  <JAreaLinkage class="linkage" placeholder="请选择设备省市区" v-model:value="orderMainModel.jal" disabled />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="设备详细地址" name="deviceAddress">
                  <a-input v-model:value="orderMainModel.deviceAddress" disabled />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="设备方位" name="deviceLocation">
                  <a-input v-model:value="orderMainModel.deviceLocation" disabled />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="设备通道" name="channelNumber">
                  <a-input v-model:value="orderMainModel.channelNumber" disabled />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="设备经度" name="deviceLong">
                  <a-input v-model:value="orderMainModel.deviceLong" disabled />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="设备纬度" name="deviceLat">
                  <a-input v-model:value="orderMainModel.deviceLat" disabled />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="设备描述" name="deviceRemark">
                  <a-input v-model:value="orderMainModel.deviceRemark" disabled />
                </a-form-item>
              </a-col>
              <!-- <a-col :span="12">
                <a-form-item label="创建时间" name="createTime">
                  <a-input v-model:value="orderMainModel.createTime" disabled />
                </a-form-item>
              </a-col> -->
            </a-row>
          </a-form>
        </div>
      </a-tab-pane>
      <a-tab-pane tab="运行状态" key="state-info">
        <DepartRoleInfoTab :deviceId="orderMainModel.deviceId" />
      </a-tab-pane>
    </a-tabs>
  </BasicModal>
</template>

<script lang="ts" setup>
import { ref, computed, unref, reactive } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index';
import { formSchema } from '../ProductCategory.data';
import { saveOrUpdate } from '../ProductCategory.api';
import DepartRoleInfoTab from '../../device/ModelstateInfoList.vue';
import { JAreaLinkage } from '/@/components/Form';

const form = {};

// Emits声明
const emit = defineEmits(['register', 'success']);
const isUpdate = ref(true);

// form表单 col
const labelCol = { span: 6 };
const wrapperCol = { span: 18 };
const activeKey = ref('device-info');

const orderMainModel = reactive({
  id: null,
  productName: '',
});
const isShow = true;
const [detailsModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  setModalProps({ confirmLoading: false, showCancelBtn: data?.showFooter, showOkBtn: data?.showFooter });
  isUpdate.value = !!data?.isUpdate;
  if (unref(isUpdate)) {
    // rowId.value = data.record.id;
    console.log(444444);

    console.log(data);
    data.record.deviceLocation = data.record.deviceLocation==1?'南':'北'
    // data.record
    Object.assign(orderMainModel, data.record);
    //object.assign(dataSource)
  }
});

async function handleSubmit(v) {
  // try {
  //   let values = await validate();
  //   setModalProps({ confirmLoading: true });
  //   //提交表单
  //   await saveOrUpdate(values, isUpdate.value);
  //   //关闭弹窗
  //   closeModal();
  //   //刷新列表
  //   emit('success', { isUpdate: isUpdate.value, values });
  // } finally {
  //   setModalProps({ confirmLoading: false });
  // }
}
async function handCancel(v) {
  activeKey.value = 'device-info';
  // await setFieldsValue({
  //   ...orderMainModel,
  // });
}
</script>

<style lang="less">
.linkage {
    color: rgba(0,0,0,0.25);
}
</style>
